<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/sks/cms/page/share/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
String menuName = request.getParameter("menuName") == null ? "" : (String)request.getParameter("menuName");
boolean isRent = true;
if ("houseListBuy".equals(menuName)) {
	isRent = false;
}

String keyWord = (request.getParameter("keyWord") == null) ? "" : request.getParameter("keyWord");
%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="租房,买房,三棵松,地产,中介" />
<meta name="description" content="三棵松地产" />
<title>三棵松地产</title>
<link rel="stylesheet" type="text/css" media="screen" href="<%=basePath %>sks/css/frontpages/common.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=basePath %>sks/css/frontpages/BrightSide.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=basePath %>sks/css/frontpages/mytestcss.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=basePath %>sks/css/frontpages/houseList.css" />
<script type="text/javascript" src="<%=basePath %>sks/js/frontpages/select2css.js"></script>
<script type="text/javascript">
function submitForm() {
	escapeTitle();
	document.houseForm.submit();
	return true;
}
function escapeTitle() {
	var t = document.houseForm.keyWord;
	t.value = escape(document.houseForm.title.value);
}
function setArea(areaId, topAreaId){
	if (topAreaId != document.houseForm.topAreaId.value) {
		document.houseForm.changeOrderBy.value = true;
	} else {
		document.houseForm.changeOrderBy.value = false;
	}
	document.houseForm.topAreaId.value = topAreaId;
	document.houseForm.areaId.value = areaId;
	submitForm();
}
function setTopAreaId(topAreaId) {
	if (topAreaId != document.houseForm.topAreaId.value) {
		document.houseForm.changeOrderBy.value = true;
	} else {
		document.houseForm.changeOrderBy.value = false;
	}
	document.houseForm.topAreaId.value = topAreaId;
	document.houseForm.areaId.value = null;
	submitForm();
}
function setAreaId(areaId) {
	if (areaId != document.houseForm.areaId.value) {
		document.houseForm.changeOrderBy.value = true;
	} else {
		document.houseForm.changeOrderBy.value = false;
	}
	document.houseForm.areaId.value = areaId;
	submitForm();
}
function setHouseType(id) {
	if (id != document.houseForm.houseTypeId.value) {
		document.houseForm.changeOrderBy.value = true;
	} else {
		document.houseForm.changeOrderBy.value = false;
	}
	document.houseForm.houseTypeId.value = id;
	submitForm();
}
function setPropertyType(id) {
	if (id != document.houseForm.propertyTypeId.value) {
		document.houseForm.changeOrderBy.value = true;
	} else {
		document.houseForm.changeOrderBy.value = false;
	}
	document.houseForm.propertyTypeId.value = id;
	submitForm();
}
function setOrderBy(order) {
	document.houseForm.orderBy.value = order;
	submitForm();
}
function setPrice(minPrice, maxPrice) {
	if (document.houseForm.minPrice.value != minPrice || document.houseForm.maxPrice.value != maxPrice) {
		document.houseForm.changeOrderBy.value = true;
	} else {
		document.houseForm.changeOrderBy.value = false;
	}
	document.houseForm.minPrice.value = minPrice;
	document.houseForm.maxPrice.value = maxPrice;
	submitForm();
}
var oldSpanId, oldSubSpanId, oldTrigonId, oldNablaId,oldlabelId ;
function setShowSubAreaIds(newSpanId, newSubSpanId, newTrigonId, newNablaId, newlabelId) {
	oldSpanId = newSpanId;
	oldSubSpanId = newSubSpanId;
	oldTrigonId = newTrigonId;
	oldNablaId = newNablaId;
	oldlabelId = newlabelId;
}
function myLoad() {
	document.houseForm.title.value = "<%=StringUtil.htmlEscape(StringUtil.unescape(keyWord))%>";
	changeMenu('<%=menuName%>');
}
function down(spanId, subSpanId, trigonId, nablaId, labelId ) {
	if ( spanId == null || subSpanId == null || trigonId == null || nablaId == null ) {
		return;
	}
	document.getElementById(spanId).onmouseover=function(){}; 
	document.getElementById(spanId).onmouseout=function(){}; 
	if ( oldSpanId != spanId) {
    	up( oldSpanId, oldSubSpanId, oldTrigonId, oldNablaId, oldlabelId );
    	if ( oldTrigonId != null ) {
	    	document.getElementById(oldNablaId).style.display='none'; 
    	}
		setShowSubAreaIds( spanId, subSpanId, trigonId, nablaId, labelId );
	}
	//document.getElementById(labelId).style.fontWeight='bold';
	document.getElementById(subSpanId).style.display=''; 
	document.getElementById(nablaId).style.display='none'; 
	document.getElementById(trigonId).style.display='';
}
function up(spanId, subSpanId, trigonId, nablaId, labelId) {
	if ( spanId == null || subSpanId == null || trigonId == null || nablaId == null || labelId == null) {
		return;
	}
	document.getElementById(subSpanId).style.display='none';
	document.getElementById(trigonId).style.display='none'; 
	//document.getElementById(labelId).style.fontWeight='normal'; 
	document.getElementById(spanId).onmouseover=function(){showTrigon(nablaId)};
	document.getElementById(spanId).onmouseout=function(){hideTrigon(nablaId)};
	document.getElementById(nablaId).style.display='';
}
function  showTrigon(id) {
	document.getElementById(id).style.display='';
} 
function hideTrigon(id) {
	document.getElementById(id).style.display='none';
}
</script>
</head>
<body onload="myLoad();">
	<div class="wrap">	
		<jsp:include page="../header.jsp"></jsp:include>
		<div>
			<div>
				<a href="<%=basePath%>" hidefocus="true">SKS房地产</a> &gt;
				<a href="<%=basePath%>sks/house.do?method=list&menuName=<%=menuName%>" target="_self" hidefocus="true"><%=isRent ? "租房" : "买房"%></a>					
			</div>		
			<div class="clear"></div>
		</div>
		<div class="content-wrap">
			<form action="<%=basePath %>sks/house.do" id="houseForm" name="houseForm" method="get" accept-charset="UTF-8" onsubmit="return submitForm();">
			<input name="method" type="hidden" value="list"/>
			<input name="topAreaId" type="hidden" value="${houseForm.topAreaId}"/>
			<input name="areaId" type="hidden" value="${houseForm.areaId}"/>
			<input name="houseTypeId" type="hidden" value="${houseForm.houseTypeId}"/>
			<input name="propertyTypeId" type="hidden" value="${houseForm.propertyTypeId}"/>
			<input name="transaStatus" type="hidden" value="${houseForm.transaStatus}"/>
			<input name="orderBy" type="hidden" value="${houseForm.orderBy}"/>
			<input name="maxPrice" type="hidden" value="${houseForm.maxPrice}"/>
			<input name="minPrice" type="hidden" value="${houseForm.minPrice}"/>
			<input name="menuName" type="hidden" value="<%=menuName%>"/>
			<input name="changeOrderBy" type="hidden" value="false"/>
			<input type="hidden" name="keyWord" value="<%=keyWord%>"/>
			<div>
				<div class="headMetro_listing box">
					<!-- 搜索 -->
					<div class="head_listing_nav">
						<div class="headMetroList">
							<!-- 区域、板块 -->
							<div class="col" style="vertical-align: middle;">
						    	<span>关键字：</span>
								<input class="keySearch" name="title" type="text"/>
								<input class="button" type="button" onclick="submitForm();" value="搜房" />
				            </div>
							<div class="listing_area">
								<span>区域：</span>
								<a id="areaNotLimit" href="javascript:setTopAreaId(null);">不限</a>
								<c:forEach var="ta" items="${topAreas}">
                           		<!--a href="javascript:setTopAreaId(${ta.areaId});" <c:if test="${ta.areaId eq houseForm.topAreaId}">style="font-weight:bold"</c:if> title="${ta.name}" hidefocus="true">${ta.name}</a-->
                           		
                           		<span id="ta_${ta.areaId}Span" style="display:-moz-inline-box; display:inline-block;width: 65px;font-weight: normal;"
									onmouseover="showTrigon('ta_${ta.areaId}_down')"
									onmouseout="hideTrigon('ta_${ta.areaId}_down')">
								<a id="ta_${ta.areaId}_label" href="javascript:;" onclick="setArea(null, ${ta.areaId});" style="margin-right:1px;cursor:hand;<c:if test="${ta.areaId eq houseForm.topAreaId}">font-weight:bold;</c:if>" title="${ta.name}" hidefocus="true">${ta.name}</a>
								<a id="ta_${ta.areaId}_down" style="display: none;margin-right:1px;" href="javascript:;" onclick="down('ta_${ta.areaId}Span', 'ta_${ta.areaId}', 'ta_${ta.areaId}_up', 'ta_${ta.areaId}_down', 'ta_${ta.areaId}_label');" hidefocus="true" >▼</a>
								<a id="ta_${ta.areaId}_up" style="display: none;margin-right:1px;" href="javascript:;" onclick="up('ta_${ta.areaId}Span', 'ta_${ta.areaId}', 'ta_${ta.areaId}_up', 'ta_${ta.areaId}_down', 'ta_${ta.areaId}_label');" hidefocus="true" >▲</a>
								</span>
                           		
								</c:forEach>
								
							</div>
							<c:forEach var="area" items="${topAreas}">
							<div id="ta_${area.areaId}" style="display: none; " >
							    <span style="display:-moz-inline-box; display:inline-block;width: 50px;background: #FFF;" ></span>
							    <div style="border: 1px solid #9EC068; background: #FFF;  padding: 3px; margin-top: 5px; margin-left: 50px;margin-right: 30px; ">
							    <c:forEach var="a" items="${area.areas}">
								<a href="javascript:;" id="subArea${a.areaId}" onclick="setArea(${a.areaId}, ${area.areaId});" title="${a.name}" style="cursor:hand;" hidefocus="true">${a.name}</a>
								</c:forEach>
								</div>
							</div>
							</c:forEach>
							<!-- 租金 -->
							<div class="listing_price">
							<% if (isRent) { %>
								<span>租金：</span>
								<a id="priceRange" href="javascript:setPrice(null, null);" title="不限">不限</a>
								<a href="javascript:setPrice(0, 500);" title="500以下" id="priceRange0">500以下</a>
								<a href="javascript:setPrice(500, 1000);" title="500-1000" id="priceRange500">500-1000</a>
								<a href="javascript:setPrice(1000, 2000);" title="1000-2000" id="priceRange1000">1000-2000</a>
								<a href="javascript:setPrice(2000, 3000);" title="2000-3000" id="priceRange2000">2000-3000</a>
								<a href="javascript:setPrice(3000, 4000);" title="3000-4000" id="priceRange3000">3000-4000</a>
								<a href="javascript:setPrice(4000, 5000);" title="4000-5000" id="priceRange4000">4000-5000</a>
								<a href="javascript:setPrice(5000, 8000);" title="5000-8000" id="priceRange5000">5000-8000</a>
								<a href="javascript:setPrice(8000, 10000);" title="8000-10000" id="priceRange8000">8000-10000</a>
								<a href="javascript:setPrice(10000, null);" title="10000以上" id="priceRange10000">10000以上</a>
							<% } else { %>
								<span>售价：</span>
								<a id="priceRange" href="javascript:setPrice(null, null);" title="不限">不限</a>
								<a href="javascript:setPrice(0, 2000);" title="2000以下" id="priceRange0">2000以下</a>
								<a href="javascript:setPrice(2000, 3000);" title="2000-3000" id="priceRange2000">2000-3000</a>
								<a href="javascript:setPrice(3000, 5000);" title="3000-5000" id="priceRange3000">3000-5000</a>
								<a href="javascript:setPrice(5000, 8000);" title="5000-8000" id="priceRange5000">5000-8000</a>
								<a href="javascript:setPrice(8000, 10000);" title="8000-10000" id="priceRange8000">8000-10000</a>
								<a href="javascript:setPrice(10000, 15000);" title="10000-15000" id="priceRange10000">10000-15000</a>
								<a href="javascript:setPrice(15000, 20000);" title="15000-20000" id="priceRange15000">15000-20000</a>
								<a href="javascript:setPrice(20000, null);" title="20000以上" id="priceRange20000">20000以上</a>
							<% } %>
							</div>

							<!-- 房型 -->
							<div class="listing_bedroom">
								<span>房型：</span>
								<a id="houseTypeNotLimit" href="javascript:setHouseType(null);">不限</a>
								<c:forEach var="ht" items="${houseTypes}">
		                           <a href="javascript:setHouseType('${ht.houseTypeId}');" title="${ht.name}"
		                           <c:if test="${ht.houseTypeId eq houseForm.houseTypeId}">style="font-weight:bold"</c:if> hidefocus="true">${ht.name}</a>
		                        </c:forEach>
							</div>
							<!-- 类型 -->
							<div class="listing_type">
								<span>类型：</span>
								<a id="propertyTypeNotLimit" href="javascript:setPropertyType(null);">不限</a>
								<c:forEach var="pt" items="${propertyTypes}">
		                           <a href="javascript:setPropertyType('${pt.propertyTypeId}');" title="${pt.name}"
		                           <c:if test="${pt.propertyTypeId eq houseForm.propertyTypeId}">style="font-weight:bold"</c:if> hidefocus="true">${pt.name}</a>
		                        </c:forEach>
							</div>							
						</div>
					</div>
				</div>
				<div class="main_content">
					<div class="content_l">
						<div class="search-result2 box">							
							<div class="search_bottom">
								<div class="totalnum">
								找到相关房子<strong>${pageView.totalrecord}</strong>套
								</div>
								<div class="sortby">									
									<div class="sea_bot_sort">
										<div class="sort_title">
											排序：
										</div>
										<div class="div_select select_w_125px" id="listSort">
											<div class="div_sel_text">
												<bean:message key="info.house.orderby.${houseForm.orderBy == null || houseForm.orderBy == '' ? 'isHot_desc' : houseForm.orderBy}"/>
											</div>
											<ul id="listsortItems" style="width:115px;">
												<li id="isHot_desc">
													<a href="javascript:setOrderBy('isHot_desc');">
														<bean:message key="info.house.orderby.isHot_desc"/>
													</a>
												</li>
												<% if (isRent) { %>
												<li id="rentPrice_asc">
													<a href="javascript:setOrderBy('rentPrice_asc');">
														<bean:message key="info.house.orderby.rentPrice_asc"/>
													</a>
												</li>
												<li id="rentPrice_desc">
													<a href="javascript:setOrderBy('rentPrice_desc');">
														<bean:message key="info.house.orderby.rentPrice_desc"/>
													</a>
												</li>
												<% } else { %>
												<li id="salePrice_asc">
													<a href="javascript:setOrderBy('salePrice_asc');">
														<bean:message key="info.house.orderby.salePrice_asc"/>
													</a>
												</li>
												<li id="salePrice_desc">
													<a href="javascript:setOrderBy('salePrice_desc');">
														<bean:message key="info.house.orderby.salePrice_desc"/>
													</a>
												</li>
												<% } %>
												<li id="publishTime_asc">
													<a href="javascript:setOrderBy('publishTime_asc');">
														<bean:message key="info.house.orderby.publishTime_asc"/>
													</a>
												</li>
												<li id="publishTime_desc">
													<a href="javascript:setOrderBy('publishTime_desc');">
														<bean:message key="info.house.orderby.publishTime_desc"/>
													</a>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="listing_prop_proplist" id="apf_id_14_list">
							<div class="clear"></div>
							<div class="listBigPho">                            	
								<ul class="listBigPhoUl">
								   <c:forEach var="h" items="${pageView.records}">
									<li class="listBigPhoUlLi" onmouseover="this.className='listBigPhoUlLi listBigPhoUlLiHover';" 
										onmouseout="this.className='listBigPhoUlLi';" >
										<dl>
											<dt onclick="window.open('<%=basePath%>sks/house.do?method=info&menuName=<%=menuName%>&houseId=${h.houseId}','_blank');">
												<img alt="${h.title}" src="<%=basePath%>${h.pictures['0'].fullPathName}" />
									        </dt>
											<dd>
												<h3 class="h3Title">
													<a href="<%=basePath%>sks/house.do?method=info&menuName=<%=menuName%>&houseId=${h.houseId}" title="${h.title}" target="_blank">
														<strong>
														<c:if test="${fn:length(h.title) > 9}">
														${fn:substring(h.title, 0, 9)}...
														</c:if>
														<c:if test="${fn:length(h.title) <= 9}">
														${h.title}
														</c:if>
														</strong>
													</a>
												</h3>
											</dd>
											<dd class="ddPrice" onclick="window.open('<%=basePath%>sks/house.do?method=info&menuName=<%=menuName%>&houseId=${h.houseId}','_blank');">
												<% if (!isRent) { %>
													<span class="yellow"><strong>${h.salePrice}</strong>/平方米</span>
												<% } else { %>
													<span class="yellow"><strong>${h.rentPrice}</strong>/月</span>
												<% } %>
								         	</dd>
											<dd class="ddInfo" onclick="window.open('<%=basePath%>sks/house.do?method=info&menuName=<%=menuName%>&houseId=${h.houseId}','_blank');">
												<c:if test="${h.building ne null}">${h.building.name}&nbsp;</c:if>
												<c:if test="${h.area ne null}">${h.area.name}&nbsp;</c:if>
											</dd>
											<dd class="ddInfo" onclick="window.open('<%=basePath%>sks/house.do?method=info&menuName=<%=menuName%>&houseId=${h.houseId}','_blank');">
												<c:if test="${h.houseType ne null}">${h.houseType.name}&nbsp;</c:if>
												<c:if test="${h.rentMode ne null && h.rentMode ne ''}"><bean:message key="info.house.rentMode${h.rentMode}"/>&nbsp;</c:if>
												<c:if test="${h.floorAt ne null && h.floorAll ne null}">楼层：${h.floorAt}/${h.floorAll}&nbsp;</c:if>
											</dd>
										</dl>
									</li>
									</c:forEach>
								</ul>
								<div class="clear"></div>
							</div>
						</div>
						<fy:page actionPath="/sks/house.do?method=list" isNewForm="false" formName="houseForm" curPageNo="${pageView.currentpage}" pageSize="${pageView.maxresult}" totalRows="${pageView.totalrecord}"/>
					</div>
				</div>
			</div>
			</form>
		</div>
		<div id="clear"></div>
		<div class="blank10"></div>
		<!-- footer starts here -->	
		<jsp:include page="../rooster.jsp"></jsp:include>
		<!-- footer ends here -->
	</div>
<script type="text/javascript">
var pr = document.getElementById('priceRange${houseForm.minPrice}');
if (pr) {
	pr.style.fontWeight = "bold";
}
if (${houseForm.topAreaId == null || houseForm.topAreaId == '' ? 'true' : 'false'}) {
	document.getElementById('areaNotLimit').style.fontWeight = "bold";
} else {
	down('ta_${houseForm.topAreaId}Span', 'ta_${houseForm.topAreaId}', 'ta_${houseForm.topAreaId}_up', 'ta_${houseForm.topAreaId}_down', 'ta_${houseForm.topAreaId}_label');
}
if (${houseForm.areaId != null && houseForm.areaId != '' ? 'true' : 'false'}) {
	document.getElementById('subArea${houseForm.areaId}').style.fontWeight = "bold";
}
if (${houseForm.houseTypeId == null || houseForm.houseTypeId == '' ? 'true' : 'false'}) {
	document.getElementById('houseTypeNotLimit').style.fontWeight = "bold";
}
if (${houseForm.propertyTypeId == null || houseForm.propertyTypeId == '' ? 'true' : 'false'}) {
	document.getElementById('propertyTypeNotLimit').style.fontWeight = "bold";
}
document.getElementById('${houseForm.orderBy == null || houseForm.orderBy == '' ? "isHot_desc" : houseForm.orderBy}').className = "selected";
</script>
</body>
</html>